<template>
  <div>
    <div class="video-tit">
      <span class="out" @click="toOut()">退出登陆</span>
      <div>{{ title }}</div>
    </div>
    <div class="main flex between">
      <div class="main-left">
        <div class="tit1">参赛选手</div>
        <div style="height: 650px; overflow-y: auto; padding: 0; border: none">
          <div
            :class="indsP == index ? 'act' : ''"
            v-for="(item, index) in list"
            :key="index"
            @click="toProduct(item.product_id, index)"
          >
            选手{{ index + 1 }}
            <span style="font-size: 20px"
              >({{ item.rating_status == 2 ? "已评分" : "未评分" }})</span
            >
          </div>
        </div>
        <div style="border: none">
          <div class="left-btns" v-if="is_finish == 0" @click="toFinish()">
            评审完成<br />全部提交
          </div>
          <div
            class="left-btns"
            v-if="is_finish == 1"
            style="background: gainsboro"
          >
            已评审完成全部提交
          </div>
        </div>
      </div>
      <div class="main-center">
        <div
          style="
            padding: 20px 28px;
            background: white;
            box-shadow: 1px 1px 5px gainsboro;
          "
        >
          <!-- <div
            v-if="info.subject_name != ''"
            style="
              font-size: 28px;
              font-weight: bold;
              border-left: solid 7px firebrick;
              padding-left: 10px;
              margin-bottom: 20px;
            "
          >
            {{ info.subject_name }}{{ info.subject_level_name }}
          </div> -->
          <div class="flex align cen-navs wrap">
            <div
              @click="toIds(index)"
              :class="inds == index ? 'act' : ''"
              v-for="(item, index) in video_list"
              :key="index"
            >
              {{ item.name }}
            </div>
            <!-- <div>视频1</div>
            <div>视频1</div> -->
          </div>
          <!-- <div class="name-tit flex align">
            <span></span>视频名称：请背（唱）完整乐曲 ;《小白菜》p31
            曲-11。(30分)
          </div> -->
          <video
            v-if="video_list.length > 0"
            controls
            class="video-player vjs-custom-skin"
            :src="video_list[inds].path"
          ></video>
          <!-- <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
          ></video-player> -->
          <div class="flex between">
            <div class="main-right">
              <div class="tit1">
                评分表
                <div
                  style="
                    text-align: right;
                    font-size: 20px;
                    padding-right: 10px;
                  "
                >
                  签名：{{ userName }}
                </div>
                <!-- <input
                  style="background: gainsboro; text-align: center"
                  placeholder="请输入签名"
                  v-model="userName"
                  disabled
                /> -->
              </div>
              <div style="max-height: 235px; overflow: auto">
                <div
                  class="flex align between"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <div>选手{{ index + 1 }}</div>
                  <div>{{ item.rating_score }}分</div>
                </div>
              </div>
            </div>
            <div class="scores">
              <div
                class="flex align"
                style="margin: 10px 0; justify-content: center"
              >
                <div>评分：</div>
                <input
                  placeholder="请输入分数"
                  :disabled="is_finish == 1 ? true : false"
                  type="number"
                  v-model="score"
                />
              </div>
              <div class="flex align btns">
                <el-button
                  v-if="is_finish == 0"
                  class="btn"
                  @click="toNextP"
                  :disabled="disabled"
                  >{{
                    indsP == list.length - 1 ? "提交评分" : "提交评分（下一个）"
                  }}</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  examinerList,
  getExamItemInfo,
  examinerDetail,
  ContestRating,
  examInfo,
  ContestFinish,
  PositionContent,
} from "@/api/apiData";
export default {
  data() {
    return {
      list: [],
      product_id: "",
      playerList: [],
      video_list: [],
      info: "",
      indsP: 0,
      inds: 0,
      score: "",
      loading: null,
      disabled: false,
      userName: "",
      is_finish: 0,
      title: "",
    };
  },
  mounted() {
    PositionContent({ posid: 18 }).then((res) => {
      if (res.code == 1) {
        this.title = res.data.title;
        document.title = res.data.title;
        this.getUserInfo();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    });
    // 考官信息
  },
  methods: {
    getUserInfo() {
      examInfo().then((res) => {
        if (res.code == 1) {
          this.userName = res.data.username;
          this.is_finish = res.data.is_finish;
          this.rest();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    toIds(i) {
      this.inds = i;
    },
    toProduct(id, i) {
      this.product_id = id;
      this.indsP = i;
      this.inds = 0;
      this.video_list = [];
      this.score = "";
      this.getInfo();
    },
    rest() {
      this.loading = this.$loading({
        lock: true,
        text: "请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      examinerList().then((res) => {
        this.list = res.data;
        if (res.data.length != 0) {
          this.product_id = res.data[0].product_id;
          this.getInfo();
        }
      });
    },
    getInfo() {
      const that = this;
      let obj = {
        product_id: that.product_id,
      };
      that.loading = this.$loading({
        lock: true,
        text: "请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      examinerDetail(obj).then((res) => {
        that.loading.close();
        if (res.code == 1) {
          that.info = res.data;
          that.video_list = res.data.video_list;
          if (res.data.rating.status == 2) {
            that.score = res.data.rating.score;
          }
        } else {
          that.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 下一个
    toNextP() {
      let obj = {
        score: this.score,
        product_id: this.product_id,
      };
      let that = this;
      // console.log(obj);
      if (obj.score == "") {
        that.$message({
          message: "请输入分数",
          type: "error",
        });
        return false;
      }
      that.disabled = true;
      that.loading = this.$loading({
        lock: true,
        text: "请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      ContestRating(obj).then((res) => {
        that.disabled = false;
        that.loading.close();
        if (res.code == 1) {
          that.$notify({
            title: "提示",
            message: "提交成功~",
            type: "success",
            duration: 2000,
          });
          that.toNe();
        } else {
          that.$notify({
            title: "提示",
            message: res.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    toNe() {
      console.log(this.indsP);
      console.log(this.list.length);
      if (this.indsP == this.list.length - 1) {
        examinerList().then((res) => {
          this.list = res.data;
        });
      } else {
        let i = this.indsP + 1;
        this.indsP = i;
        this.inds = 0;
        this.product_id = this.list[i].product_id;
        this.video_list = [];
        this.score = "";
        examinerList().then((res) => {
          this.list = res.data;
          this.getInfo();
        });
      }
    },
    // 完成评分
    toFinish() {
      let that = this;
      this.$confirm("确定要完成评分吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ContestFinish().then((res) => {
            if (res.code == 1) {
              that.$notify({
                title: "提示",
                message: "提交成功~",
                type: "success",
                duration: 2000,
              });
              this.getUserInfo();
            } else {
              that.$notify({
                title: "提示",
                message: res.msg,
                type: "error",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    toOut() {
      let that = this;
      that
        .$confirm("确定要退出登录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.$router.push("/login");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.video-tit {
  background: white;
  box-shadow: 1px 1px 5px gainsboro;
  div {
    background: #d74939;
    font-size: 36px;
    color: white;
    padding: 24px 0;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
  }
}
.tit1 {
  font-size: 34px;
  color: #d74939;
  font-weight: bold;
  padding: 14px 0;
  border-left: none !important;
}
.main {
  margin-top: 10px;

  .main-left {
    width: 18%;
    background: white;
    text-align: center;
    box-shadow: 1px 1px 5px gainsboro;
    border-radius: 10px;
    font-size: 24px;
    color: #2d2d2d;
    font-weight: bold;
    div {
      padding: 14px 0;
      border-bottom: solid 1px #d1d0d0;
      position: relative;
      border-left: solid 9px white;
      cursor: pointer;
    }
    .act {
      border-left: solid 9px #87170a;
      background: #d74939;
      color: white;
    }
    .left-btns {
      background: #d74939;
      color: white;
      font-size: 22px;
      width: fit-content;
      padding: 11px 31px;
      border-radius: 20px;
      margin: 0px auto;
      border: none;
      cursor: pointer;
    }
  }
  .main-center {
    width: 81%;
    border-radius: 10px;
    .cen-navs {
      div {
        // width: 149px;
        cursor: pointer;
        padding: 0 20px;
        line-height: 39px;
        background: gray;
        color: white;
        text-align: center;
        border-radius: 53px;
        font-size: 24px;
        font-weight: bold;
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .act {
        background: linear-gradient(to right, #ff8375, #d74939);
      }
    }
    .name-tit {
      font-size: 24px;
      font-weight: bold;
      margin-top: 20px;
      margin-bottom: 30px;
      span {
        display: block;
        background: #ff5b00;
        width: 9px;
        height: 34px;
        border-radius: 3px;
        margin-right: 20px;
      }
    }
    .video-player {
      height: 484px;
      width: 100%;
      margin-bottom: 10px;
    }
    .scores {
      font-size: 50px;
      width: 56%;
      .flex {
        margin-right: 20px;
      }
      input {
        border: none;
        border-bottom: solid 1px gainsboro;
        font-size: 48px;
        padding: 5px;
        background: none;
      }
    }
    .btns {
      margin-top: 100px;
      justify-content: space-around;
      div {
        background: linear-gradient(to right, #ff8375, #d74939);
        font-size: 34px;
        font-weight: bold;
        line-height: 95px;
        text-align: center;
        color: white;
        border-radius: 53px;
      }
      div:nth-child(1) {
        width: 35%;
        background: #a81808;
      }
      div:nth-child(2) {
        width: 58%;
      }
      /deep/.btn {
        display: block;
        background: #d74939;
        color: white;
        font-size: 22px;
        width: fit-content;
        padding: 15px 31px;
        border-radius: 20px;
        margin: 0px auto;
        background: d74939;
        font-weight: bold;
      }
    }
  }
}
.main-right {
  width: 40%;
  background: white;
  // height: 900px;
  // overflow-y: auto;
  text-align: center;
  box-shadow: 1px 1px 5px gainsboro;
  border-radius: 10px;
  font-size: 24px;
  text-align: center;
  .tit1 {
    border-bottom: solid 1px #d1d0d0;
  }
  .flex {
    border-bottom: solid 1px #d1d0d0;
    div {
      flex: 1;
      padding: 11px 0;
    }
    div:nth-child(1) {
      border-right: solid 1px #d1d0d0;
    }
    div:nth-child(2) {
      color: #d74939;
      font-weight: bold;
    }
  }
}
.out {
  color: #d74939;
  border: solid 1px #d74939;
  background: none;
  position: absolute;
  right: 10px;
  top: 30px;
  display: block;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 20px;
}
</style>